﻿@model IEnumerable<B4Deal.Models.miniProduct>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Layout/giatot_all.css")"/>
<script src="@Url.Content("~/Scripts/js/jquery.tools.min.js")" type="text/javascript"></script>
<div id="cartScreen">
    <div id="headerCart">
        Your Cart</div>
    <div id="stepCart">
        <div id="step1" class="step selected" style="-moz-transform: translate(0px, 0px) scale(1);">
            <p>
                <span id="b1" class="tag">Bước 1</span> Xem giỏ hàng</p>
        </div>
        <div id="step2" class="step" style="-moz-transform: translate(276px, 0px) scale(1);">
            <p>
                <span id="b2" class="tag">Bước 2</span> Thanh toán</p>
        </div>
    </div>
    <div id="title" style="height: 90px; width: 578px; margin-top: 10px !important;">
        @{
            float SumPrice = 0;
            String alert = "Bạn không có sản phẩm nào trong giỏ hàng.";
            if (Model.Count() > 0)
            {
                int sl = 0;
                foreach (var i in Model)
                {
                    sl += i.SoLuong;
                    SumPrice += i.DonGiaMoi * i.SoLuong;
                }
                alert = "Bạn có " + sl + " sản phẩm trong giỏ hàng của bạn.";
            }
        }
        <p>
            @alert</p>
    </div>
    <div id="listItem">
        <div id="cartView">
            <div id="itemTable" class="tableCart">
                <a class="prev left"></a>
                <div id="scrollScreen" class="scrollable">
                    <div class="itemsScroll">
                        @{foreach (var item in Model)
                          {
                            <div class="item">
                                @Html.Partial("_cartDeal", item)
                            </div>                        
                          }
                        }
                    </div>
                </div>
                <a class="next right"></a>
                <script>
                    $(".itemsScroll .item").click(function () {
                        $(this).addClass("active");
                        $(this).siblings().removeClass("active");
                    });
                    $("#scrollScreen").scrollable({ size: 1, items: '.itemsScroll' });                  
                </script>
            </div>
            <div id="cartInfo">
                <div id="labelSum" style="">
                    <p>
                        Tổng cộng <span id="amount">@String.Format("{0:0,0}", SumPrice)</span>
                    </p>
                </div>
                <div id="updateButton" class="button" style="right: 238px;">
                    <p>
                        Cập nhật</p>
                </div>
            </div>
        </div>
    </div>
    <div id="buttonGroup">
        <div id="leftButton" class="button" style="height: 20px; width: 88px;" onclick="ClearCart()">
            <p>
                Hủy bỏ</p>
        </div>
        <div id="rightButton" class="button" style="height: 20px; width: 162px;">
            <a href="javascript:void()" onclick = "PayCart()">
                <p>
                    Thanh toán</p>
            </a>
        </div>
    </div>
</div>            
